<template>
    <div id="member" class="wrapper-fixed">
        <div class="action-bar-wrapper">
            
            <el-col :span="24" class="action-bar">
                <el-input v-model="searchText" placeholder="用户昵称或手机号" style="width:300px;margin-right:20px"></el-input>
                <el-select v-model="authStatusOption"  clearable placeholder="认证状态" style="margin:0 20px;">
                    <el-option
                    v-for="item in authStatusOptionsSearch"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
                <el-button type="primary" size="medium" @click="search">检索</el-button>
                <!-- <el-button type="primary" size="medium" @click="addStaffVisible=true">添加</el-button> -->
            </el-col>
        </div>

        <!-- 列表 -->
        <el-table
            :data="tableData"
            style="width: 100%">
            <el-table-column
                prop="realname"
                label="姓名"
                width="100">
            </el-table-column>
            <el-table-column
                prop="phone"
                label="手机"
                width="120"
                >
            </el-table-column>
            
            <el-table-column
                label="认证状态"
                width="100"
                >
                <template slot-scope="scope" v-if="scope.row.unit_auth_info">
                    <div>
                        <el-tag type="info" v-if="scope.row.unit_auth_info.is_auth!=1">注销</el-tag>
                        <el-tag type="success" v-if="scope.row.unit_auth_info.is_auth==1">正常</el-tag>
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                prop="created_at"
                label="提交时间"
                show-overflow-tooltip
                width="180"
                >
                <template slot-scope="scope" v-if="scope.row.unit_auth_info">
                    <div>
                        {{scope.row.unit_auth_info.created_at}}
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                prop="审核时间"
                label="审核时间"
                show-overflow-tooltip
                width="180"
                >
                <template slot-scope="scope" v-if="scope.row.unit_auth_info">
                    <div>
                        {{scope.row.unit_auth_info.updated_at}}
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="操作" width='300'>
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="showEditorVislble(scope.row)">编辑</el-button>
                    <el-button type="primary" size="mini" @click="showConsultationVisible(scope.row)">认证资料</el-button>
                    <el-button type="danger" size="mini" @click="deleteStaff(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-col :span="24" class="footer-bar">
			<div class="page-code">
				<el-pagination
					background
					:page-size="16"
					layout="prev, pager, next"
					:total="totalPage"
					@current-change="pageChange"
						>
				</el-pagination>
			</div>
    </el-col>
    <!-- 列表end -->


        <!-- 认证资料 -->
		<el-dialog title="认证资料" :visible.sync="consultationVisible" @close="initData">
            
            <el-form :label-position="'left'" label-width="150px" >
                
                <!-- <el-form-item label="头像" >
                    <div> <img src="https://ciy.oss-cn-shenzhen.aliyuncs.com//web/bibiji/2020/2/12/ededff219ce3963a786cc3047944a444.jpg" alt="" style="width:60px;border-radius:50%;height:60px;object-fit:cover"></div>
                </el-form-item> -->
                <el-form-item label="姓名" >
                    <div>{{consultationDetail.realname}}</div>
                </el-form-item>
                <el-form-item label="手机" >
                    <div>{{consultationDetail.phone}}</div>
                </el-form-item>
                <el-form-item label="单位名称" >
                    <div>{{consultationDetail.unit_auth_info.name}}</div>
                </el-form-item>
                <el-form-item label="单位地址" >
                    <div>{{consultationDetail.unit_auth_info.province}}{{consultationDetail.unit_auth_info.city}}{{consultationDetail.unit_auth_info.area}}{{consultationDetail.unit_auth_info.address}}</div>
                </el-form-item>
                <el-form-item label="营业执照" >
                    <div>
                        <img :src="consultationDetail.unit_auth_info.license_img_url" alt="" style="max-width:300px">
                    </div>
                </el-form-item>
                <el-form-item label="认证状态"  >
                    <div>
                        <el-tag type="info" v-if="consultationDetail.unit_auth_info.is_auth!=1">注销</el-tag>
                        <el-tag type="success" v-if="consultationDetail.unit_auth_info.is_auth==1">正常</el-tag>
                    </div>
                </el-form-item>
                <el-form-item label="提交时间" >
                    <div>{{consultationDetail.unit_auth_info.created_at}}</div>
                </el-form-item>
                <el-form-item label="审核时间" >
                    <div>{{consultationDetail.unit_auth_info.auth_time}}</div>
                </el-form-item>
                
                
            </el-form>
		</el-dialog>
        <!-- 认证资料end -->

        <!-- 编辑资料 -->
		<el-dialog title="编辑资料" :visible.sync="editorVisible" @close="initData">
            
            <el-form :label-position="'left'" label-width="100px" >
                
                <!-- <el-form-item label="头像" >
                    <div> <img src="https://ciy.oss-cn-shenzhen.aliyuncs.com//web/bibiji/2020/2/12/ededff219ce3963a786cc3047944a444.jpg" alt="" style="width:60px;border-radius:50%;height:60px;object-fit:cover"></div>
                </el-form-item> -->
                <el-form-item label="姓名" >
                    <el-input v-model="member.name" style="width:200px"></el-input>
                </el-form-item>
                <el-form-item label="认证状态" >
                    <el-select v-model="member.authStatus"  clearable placeholder="认证状态" >
                        <el-option
                        v-for="item in authStatusOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                
            </el-form>
            <div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="editUnitEmployeeInfo">保存</el-button>
			</div>
		</el-dialog>
        <!-- 编辑资料end -->



    </div>
</template>
<script>
export default {
    name:'member',
    data() {
        return {
            consultationVisible:false,//认证资料弹窗
            addStaffVisible:false,//添加弹窗状态
            editorVisible:false,//申请编辑弹窗
            searchText:'',
            userAuthId:'',//选中的用户id

            vipList:[],
            executor:'',
            loading:false,

            authStatusOption:'',//头部筛选认证状态
            authStatusOptionsSearch:[
                {label:'全部',value:-1},
                {label:'正常',value:1},
                {label:'注销',value:3}

            ],
            
            authStatusOptions:[
                {label:'正常',value:1},
                {label:'注销',value:3}

            ],
            member:{//编辑信息
                name:'',
                authStatus:'',
                id:''
            },
            
            consultationDetail:{unit_auth_info:{}},
            tableData: [{}],
            page:1,
            totalPage:0    
        }
    },
    watch: {

    },
    methods: {
        search(){
            this.page=1;
            this.getUnitEmployeeList()
        },
        async getUnitEmployeeList(){
            let params={
                page:this.page,
                limit:16,
                id:this.id,
                keyword:this.searchText,
                is_auth:this.authStatusOption==-1?'':this.authStatusOption
            }
            let res=await this.$api.getUnitEmployeeList(
                params);
            if(res.data.level=='success'){
                this.tableData=res.data.data;
                this.totalPage=res.data.page_info.total;
            }
        },
        async editUnitEmployeeInfo(){
            //编辑员工信息
            let params={
                realname:this.member.name,
                status:this.member.authStatus,
                id:this.member.id
            }
            let res=await this.$api.editUnitEmployeeInfo(params)
            if(res.data.level=='success'){
                this.$message({
                    type:'success',
                    message:res.data.message
                })
                this.editorVisible = false
                this.getUnitEmployeeList()
            }else{
                this.$message({
                    type:'error',
                    message:res.data.message
                })
            }
        },
        pageChange(e){
			//翻页
			this.page=e;
			this.getUnitEmployeeList();
        },
        async deleteStaff(id){
            //删除
            let judge=null;
            let tit='删除该员工?';
            try {
              judge=  await this.$confirm(tit, '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
                })
            } catch (error) {
                judge='cancel'
            }
            if(judge=='confirm'){
                this.delUnitEmployee(id)
            }
            console.log(judge)
        },
        async delUnitEmployee(id){
            let res=await this.$api.delUnitEmployee({id:id})
            if(res.data.level=='success'){
                this.$message({
                    type:'success',
                    message:res.data.message
                })
                this.editorVisible = false
                this.getUnitEmployeeList()
            }else{
                this.$message({
                    type:'error',
                    message:res.data.message
                })
            }
        },

        showCertification(){
            //新增
            this.addStaffVisible=true
        },
        showEditorVislble(scope){
            //编辑申请资料弹窗
            this.member.name=scope.realname;
            this.member.authStatus=+scope.unit_auth_info.is_auth;
            this.member.id=scope.user_id;
            this.editorVisible=true
        },
        showConsultationVisible(scope){
            //申请资料弹窗
            this.consultationDetail=scope
            this.consultationVisible=true
        },
        setCircleAdmin(){
            
        },
        toCustomer_detail(id){
            this.$router.push({name:'Customer_detail',query:{id:id}})
        },
        initData(){
            this.member=this.$options.data().member;
        }

    },
    mounted() {
        this.id=this.$route.query.id
        this.getUnitEmployeeList()
    },
}
</script>
<style lang="scss" scoped>
    .screen{
          margin-top: -10px !important;
      }
      .action-bar-wrapper{
          position: sticky;
            z-index: 1;
            top:-10px;
      }
    .action-bar{
			background-color: #f2f2f2;
            
			height: 60px;
			margin: 10px 0px;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			padding-left: 20px;
			.action-bar-input{
				width: 250px;
				margin-right: 14px;
      }
      .task-form-text{
				color: #666666;
			}
		}
		.el-table-style{
			width: 100%;
			border: 1px solid #f2f2f2;
		}
		.footer-bar{
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: #f2f2f2;
			padding: 8px;
			margin: 10px 0px;
			box-sizing: border-box;
		}
		.dialog-footer{
			text-align: center;
		}
		.executorList{
			display: flex;
			flex-wrap: wrap;
			div{
				margin:10px;
				border:1px solid #eee;
				border-radius: 5px;
				padding:5px 10px;
			}
		}
</style>